<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function () {
            var image=document.getElementById("image");
            //创建一个数组 保存图片的路径
            var imageArr=["../imagconman/2020318.png","../imagconman/向日葵.png","../imagconman/荷花.png","../imagconman/蝗虫.png"];
            //创建一个变量 用来保存当前图片的索引
            var index=0;
            var timer;
            var btn1=document.getElementById("btn1");
            btn1.onclick=function(){
                //在开启一个定时器之前，要关闭上一个定时器
                clearInterval(timer);
                //开启一个定时器 自动切换图片
               timer= setInterval(function () {
                    index++;
                    //判断索引是否超过最大索引
                    // if (index>=imageArr.length){
                    //     index=0;
                    // }//第一种写法
                   index%=imageArr.length;//第二种写法
                    image.src=imageArr[index];
                },1000);
            };
            var btn2=document.getElementById("btn2");
            btn2.onclick=function () {
                //点击按钮以后 停止图片的自动切换，关闭定时器
                clearInterval(timer);//clearInterval()可以接受任意的参数，如果参数是有效的定时器标识，则停止对应的定时器
                //如果参数不是一个有效的标识，则什么也不变
            }
        }
    </script>
</head>
<body>
<script>
    /*clearInterval()可以接受任意的参数，如果参数是有效的定时器标识，则停止对应的定时器
    *如果参数不是一个有效的标识，则什么也不变
    *
    *
    *
    *
    *
    * */
</script>
<img  id="image" src="../imagconman/2020318.png" >
<br />
<br />
<button id="btn1">开始</button>
<button id="btn2">停止</button>
</body>
</html>